<template>
  <div class="DivBox">
    <div class="canvasDiv" ref="LeftHeight">
      <div class="titles">
        <h2>客服统计</h2>
        <span class="iconfont icon-closel" @click="spanLeft"></span>
      </div>
      <div class="canvas">
        <h3>年度客服统计</h3>
        <canvas id="container" width="800" height="400"></canvas>
      </div>
    </div>
    <div class="canvasDiv" ref="RightHeight">
      <div class="titles">
        <h2>占比统计</h2>
        <span class="iconfont icon-closel" @click="spanRight"></span>
      </div>
      <div class="canvas">
        <h3>占比统计</h3>
        <canvas id="containers" width="800" height="400"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import {
  jsx,
  Canvas,
  Chart,
  Line,
  Axis,
  Tooltip,
  Legend,
  Interval,
} from "@antv/f2";
export default {
  name: "ChartLft",
  data() {
    return {
      ChartData: [
        {
          date: "2017-06-05",
          value: 116,
        },
        {
          date: "2017-06-06",
          value: 129,
        },
        {
          date: "2017-06-07",
          value: 135,
        },
        {
          date: "2017-06-08",
          value: 86,
        },
      ],
      ChartDatas: [
        {
          name: "长津湖",
          percent: 0.4,
          a: "1",
        },
        {
          name: "我和我的父辈",
          percent: 0.2,
          a: "1",
        },
        {
          name: "失控玩家",
          percent: 0.18,
          a: "1",
        },
        {
          name: "宝可梦",
          percent: 0.15,
          a: "1",
        },
        {
          name: "峰爆",
          percent: 0.05,
          a: "1",
        },
        {
          name: "其他",
          percent: 0.02,
          a: "1",
        },
      ],
    };
  },
  methods: {
    ChartLft() {
      const data = this.ChartData;
      const context = document.getElementById("container").getContext("2d");
      const { props } = (
        <Canvas context={context} pixelRatio={window.devicePixelRatio}>
          <Chart data={data}>
            <Axis
              field="date"
              type="timeCat"
              tickCount={5}
              mask="MM-DD"
              range={[0, 1]}
              style={{
                label: {
                  align: "between",
                },
              }}
            />
            <Axis field="value" />
            <Tooltip showCrosshairs={true} />
            <Line x="date" y="value" />
          </Chart>
        </Canvas>
      );

      const canvas = new Canvas(props);
      canvas.render();
    },
    ChartRight() {
      const data = this.ChartDatas;
      const context = document.getElementById("containers").getContext("2d");
      const { props } = (
        <Canvas context={context} pixelRatio={window.devicePixelRatio}>
          <Chart
            data={data}
            coord={{
              radius: 0.8,
              transposed: true,
              type: "polar",
            }}
          >
            <Interval
              x="a"
              y="percent"
              adjust="stack"
              color="name"
              selection={{
                selectedStyle: (record) => {
                  const { yMax, yMin } = record;
                  return {
                    // 半径放大 1.1 倍
                    r: (yMax - yMin) * 1.1,
                  };
                },
              }}
            />
          </Chart>
        </Canvas>
      );
      const chart = new Canvas(props);
      chart.render();
    },
    //点击span自下而上过渡关闭图表
    spanLeft() {
      this.$refs.LeftHeight.style.height = "0";
    },
    spanRight() {
      this.$refs.RightHeight.style.height = "0";
    },
  },
  mounted() {
    this.ChartLft();
    this.ChartRight();
  },
};
</script>

<style scoped lang="less">
.DivBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .canvasDiv {
    width: 49%;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s linear;
    .canvas {
      width: 100%;
      h3 {
        margin-bottom: 3%;
      }
      canvas {
        width: 90%;
      }
    }
    .titles {
      border-top: 3px solid #d2d6de;
      border-bottom: 1px solid #f4f4f4;
      margin: 0 auto;
      width: 100%;
      height: 10%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      h2 {
        margin-left: 1%;
      }
      span {
        margin-right: 1%;
        cursor: pointer;
      }
    }

    canvas {
      box-sizing: border-box;
      border: 1px solid red;
    }
  }
}
</style>